<template>
  <div>
    <div class="mask" @click="closePopup(true)"></div>
    <div class="image_box">
      <div>
        <i @click="closePopup">
          <img src="../../../assets/img/common/close_white.png">
        </i>
        <img :src="qrcode" class="code">
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props:['qrcode'],
  data(){
    return {

    }
  },
  mounted() {
    // console.log(this.qrcode)
  },
  methods:{
    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.image_box {
  position: fixed;
  z-index: 1001;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  background: #fff;
  border-radius: 6px;
}

.image_box div{
  position: relative;
}

.image_box div .code{
  width: 100%;
  height: 100%;
}

.image_box div i {
  position: absolute;
  right: -25px;
  top: -25px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.image_box i img {
  width: 12px;
  height: 12px;
}
</style>
